<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多Tab点击切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        #container {
            position: relative;
        }

        #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }

        #tab1, #content1 {
            background-color: #ffaaee;
        }

        #tab2, #content2 {
            background-color: #445566;
        }

        #tab3, #content3 {
            background-color: #99aabb;
        }
    </style>
</head>
<body>
<ul id="tab">
    <li id="tab1" value="1">10元套餐</li>
    <li id="tab2" value="2">30元套餐</li>
    <li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
    <div id="content1">
        10元套餐详情：<br> 每月套餐内拨打100分钟，超出部分2毛/分钟
    </div>
    <div id="content2" style="display:none">
        30元套餐详情：<br> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
    </div>
    <div id="content3" style="display:none">
        50元包月详情：<br> 每月无限量随心打
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function () {
        var $containers = $('#container>div');
        var curIndex = 0;
        $('#tab>li').click(function () { // 隐式遍历
            // 隐藏上一次
            $containers[curIndex].style.display = 'none';
            // 显示当前的
            curIndex = $(this).index();
            $containers[curIndex].style.display = 'block';
        });
    });
</script>
</body>
</html>